<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden">
        <header class="flex-none h-[76px] box-border">
            <h5 class="h-full flex flex-row items-center text-primary text-2xl font-bold">公司设置</h5>
        </header>
        <div class="w-full flex-1 box-border flex flex-row items-stretch gap-3 overflow-y-hidden">
            <section class="flex-none bg-white flex flex-col w-[200px] rounded-xl">
                <div class="flex-1 relative overflow-y-auto pt-5 pb-15 nav-links">
                    <ul class="flex flex-col px-3 gap-[6px]">
                        <li v-for="route of navRoutes" :key="route.name">
                            <RouterLink :to="{ name: route.name }"
                                class="block h-10 !leading-10 px-10 rounded-sm touchable-opacity text-sm text-primary hover:!bg-[#0768FA]/6"
                                exact-active-class="!bg-[#0768FA]/6 font-bold !text-theme"
                            >
                                {{ route.text }}
                            </RouterLink>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="flex-1 bg-white rounded-xl">
                <div class="h-full overflow-y-auto box-border">
                    <RouterView />
                </div>
            </section>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { RouteMap } from 'vue-router';

defineOptions({
    name: 'CompSettingLayout'
})
definePage({
    name: 'CompSettingLayout',
    redirect: { name: "MemberManagePage" },
    meta: {
        isLayout: true,
        title: '公司设置'
    }
})
const navRoutes = ref(<Array<{ name: keyof RouteMap; text: string; disabled?: boolean; }>>[
    {
        name: "MemberManagePage",
        text: "成员管理"
    },
    {
        name: "CompanyInfoPage",
        text: "公司信息",
        disabled: false
    },
    {
        name: "PersonalSettingPage",
        text: "个人设置"
    }
].filter(nav => !nav.disabled))
</script>
<style lang="less" scoped>
.nav-links :where(a) {
    color: var(--color-primary);
}
.card-item {
    &:hover,
    &.active-card-item {
        background-color: #EFF4FA;
    }
    &.active-card-item {
        border: 1px solid #9AC3FF;
    }
}
.filter-job-item {
    &:hover,
    &.active-filter-job-item {
        background: #F8F9FA;
    }
    &.active-filter-job-item .iconfont {
        display: block;
    }
}
</style>